import React from "react"
import gddetail from "./css/gdDetail.module.css"
import dtDetail from "./css/dtDetail.module.css"
import queryString from "query-string"

import {getDtDetail,getDtDis,getSubRadio} from "../../api/index"

class DtDetail extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            programs:[],
            flag:true,
            dis:{},
            sub:true
        }
    }
    componentDidMount(){
        let qr = queryString.parse(this.props.location.search)
        getDtDetail(qr.id)
        .then(body=>body.json())
        .then(res=>{
            this.setState({
                programs:res.programs
            })
            // console.log(this.state.programs)
        })
        getDtDis(qr.id)
        .then(body=>body.json())
        .then(res=>{
            this.setState({
                dis:res.djRadio
            })
            // console.log(this.state.dis)
        })
    }
    handleBack(){
        // console.log('11')
        this.props.history.goBack()
    }
    handleT(){
        this.setState({
            flag:true
        })
    }
    handleF(){
        this.setState({
            flag:false
        })
    }
    jumpToBofang(id){
        this.props.history.push("/playmusic?id="+id)
    }
    subRadio(){
        let qr = queryString.parse(this.props.location.search)
        this.setState({
            sub:!this.state.sub
        })
        let t = 1
        if(this.state.sub){
            t = 1
        }else{
            t = 0
        }
        getSubRadio(qr.id,t)
        .then(body=>body.json())
        .then(res=>{
            console.log(res)
        })
    }
    render(){
        if(this.state.flag){
            // let t = 1
            return(
                <div>
                    <div className={gddetail.header}>
                            <div className={gddetail.back} onClick={this.handleBack.bind(this)}>
                                <svg t="1573891662627" className={gddetail.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9822" width="30" height="30"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" fill="#666666" p-id="9823"></path></svg>
                            </div>
                            <div>
                                <h1>电台详情</h1>
                            </div>
                            <div className={gddetail.bofang}>
                            <svg t="1573806248923" className={gddetail.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7780" width="40" height="40"><path d="M896 960c-23.6 0-42.7-19.1-42.7-42.7v-512c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v512c0 23.6-19.1 42.7-42.7 42.7z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V490.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v426.7c0 23.5-19.1 42.6-42.7 42.6z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V106.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v810.7c0 23.5-19.1 42.6-42.7 42.6z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V618.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v298.7c0 23.5-19.1 42.6-42.7 42.6z" fill="#333333" p-id="7781"></path></svg>
                            </div>
                    </div>

                    
                    
                    <div className={dtDetail.main}>
                    <div className={dtDetail.radioName}>
                        <h1>{this.state.dis.name}</h1>
                        {this.state.sub ?
                        <button onClick={this.subRadio.bind(this)}>订阅</button> : <button onClick={this.subRadio.bind(this)}>订取消阅</button>
                        }
                    </div>
                        <div className={dtDetail.btn}>
                            <button onClick={this.handleF.bind(this)}>详情</button>
                            <button onClick={this.handleT.bind(this)}>节目</button>
                        </div>
                        {this.state.programs.map((item,index)=>
                            <div onClick={this.jumpToBofang.bind(this,item.id)} key={index} className={dtDetail.song}>
                                <p>{item.name}</p>
                            </div>
                        )}
                    </div>
                </div>
            )
        }else{
            return(
                <div>
                    <div className={gddetail.header}>
                            <div className={gddetail.back} onClick={this.handleBack.bind(this)}>
                                <svg t="1573891662627" className={gddetail.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9822" width="30" height="30"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" fill="#666666" p-id="9823"></path></svg>
                            </div>
                            <div>
                                <h1>电台详情</h1>
                            </div>
                            <div className={gddetail.bofang}>
                            <svg t="1573806248923" className={gddetail.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7780" width="40" height="40"><path d="M896 960c-23.6 0-42.7-19.1-42.7-42.7v-512c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v512c0 23.6-19.1 42.7-42.7 42.7z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V490.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v426.7c0 23.5-19.1 42.6-42.7 42.6z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V106.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v810.7c0 23.5-19.1 42.6-42.7 42.6z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V618.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v298.7c0 23.5-19.1 42.6-42.7 42.6z" fill="#333333" p-id="7781"></path></svg>
                            </div>
                    </div>
                    
                    <div className={dtDetail.main}>
                    <div className={dtDetail.radioName}>
                        <h1>{this.state.dis.name}</h1>
                        <button>订阅</button>
                    </div>
                        <div className={dtDetail.btn}>
                            <button onClick={this.handleF.bind(this)}>详情</button>
                            <button onClick={this.handleT.bind(this)}>节目</button>
                        </div>
                        <div className={dtDetail.dj}>
                            <div className={dtDetail.touxiang}>
                                <img src={this.state.dis.dj.avatarUrl}/>
                            </div>
                            <div className={dtDetail.djName}>
                                <p>{this.state.dis.dj.nickname}</p>
                            </div>
                            <div className={dtDetail.describe}>
                                <h2>电台类容简介</h2>
                                <p>{this.state.dis.desc}</p>
                            </div>
                            <div className={dtDetail.comment}>
                                <h3>精彩评论</h3>
                                {this.state.dis.commentDatas.map((item,index)=>
                                    <div key={index} className={dtDetail.commentBox}>
                                        <div className={dtDetail.user}>
                                            <img src={item.userProfile.avatarUrl}/>
                                            <p>{item.userProfile.nickname}</p>
                                        </div>
                                        <div className={dtDetail.content}>
                                            <p>{item.content}</p>
                                                <span>--{item.programName}</span>
                                                &nbsp;
                                                &nbsp;
                                                &nbsp;
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
    }
}

export default DtDetail